<script setup lang="ts" name="BpmnExternalTools">
import ExternalToolsDrawer from './ExternalToolsDrawer.vue'
import { useSettingStore } from '@/store/bpmnProcess/settingStore'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { storeToRefs } from 'pinia'

const settings = useSettingStore()

const modelerInfo = useModelerStore()

const { editor } = storeToRefs(settings)

const ExternalToolsDrawerRef = ref(null)

const mockSimulation = () => {
  const modeler = modelerInfo.getModeler
  modeler.get('toggleMode').toggleMode()
}

const miniMapToggle = () => {
  const modeler = modelerInfo.getModeler
  const minimap = modeler.get('minimap')
  minimap.toggle()
}

const lintToggle = () => {
  const modeler = modelerInfo.getModeler
  const lintModule = modeler.get('linting')
  lintModule.toggle()
}

const showDrawer = (v) => {
  ExternalToolsDrawerRef.value.showDrawer(v)
}
</script>

<template>
  <div class="button-group">
    <el-tooltip effect="light" content="开启/关闭流程模拟" placement="bottom" :hide-after="100">
      <div class="item-button" @click="mockSimulation"><svg-icon icon="ri:discord-line"></svg-icon></div>
    </el-tooltip>
    <el-tooltip v-if="editor.miniMap" effect="light" content="展开/收起小地图" placement="bottom" :hide-after="100">
      <div class="item-button" @click="miniMapToggle"><svg-icon icon="ri:map-2-line"></svg-icon></div>
    </el-tooltip>
    <el-tooltip v-if="editor.useLint" effect="light" content="流程验证" placement="bottom" :hide-after="100">
      <div class="item-button" @click="lintToggle"><svg-icon icon="ri:flow-chart"></svg-icon></div>
    </el-tooltip>
    <el-tooltip effect="light" content="查看bpmn事件" placement="bottom" :hide-after="100">
      <div class="item-button" @click="showDrawer('event')"><svg-icon icon="ri:magic-line"></svg-icon></div>
    </el-tooltip>
    <el-tooltip effect="light" content="键盘快捷键" placement="bottom" :hide-after="100">
      <div class="item-button" @click="showDrawer('keyboard')"><svg-icon icon="ri:keyboard-box-line"></svg-icon></div>
    </el-tooltip>
    <ExternalToolsDrawer ref="ExternalToolsDrawerRef"></ExternalToolsDrawer>
  </div>
</template>

<style scoped lang="scss">
.button-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 2px 2px 3px;
  border-right: 1px solid var(--el-border-color-lighter);

  .item-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 2px;
    border-radius: 2px;
    cursor: pointer;

    &.disabled {
      cursor: not-allowed;

      .el-icon {
        color: var(--el-text-color-disabled);
      }

      &:hover {
        background-color: transparent;

        .el-icon {
          color: var(--el-text-color-disabled);
        }
      }
    }

    &:hover {
      background-color: var(--el-color-primary-light-9);

      .el-icon {
        color: var(--el-color-primary);
      }
    }

    .el-icon {
      font-size: 20px !important;
    }
  }
}
</style>
